<template>
	<view class="contentTop">
    <view class="showForTahClass" v-show="showForTah">
      <view class="topViewDetail">
        
        <topBar :list="listDefault" :key="timer" @checkedEm="checkedEm"/>
        <!-- <u-tabs
          @click="checkedEm"
          :list="listDefault"
          :scrollable="isScrollable"
          :activeStyle="{
              color: '#303133',
              fontWeight: 'bold',
              transform: 'scale(1.05)'
          }"
          :inactiveStyle="{
              color: '#606266',
              transform: 'scale(1)'
          }"
          >
        </u-tabs> -->
      </view>
      <view>
        <view class="outSideBox_one" v-if="tag === 0">
          <view class="detail">
            <view class="topLine">
              <u-radio-group
                v-model="radiovalue"
                placement="row"
                @change="groupChange"
              >
                <u-radio
                  :customStyle="{marginBottom: '16rpx'}"
                  v-for="(item, index) in radiolist"
                  :key="index"
                  size="36"
                  iconSize="24"
                  labelSize="36"
                  :label="item.name"
                  :name="item.name"
                  @change="radioChange"
                >
                </u-radio>
              </u-radio-group>
            </view>
            <view class="uniCanvas">
              <uni-ec-canvas
                v-show="isShowCanvas"
                class="uni-ec-canvas" 
                id="line-chart" 
                ref="canvas"
                canvas-id="lazy-load-chart" 
                :ec="ec">
              </uni-ec-canvas>
              <view class="notDataCanvas" v-show="!isShowCanvas">
                <image src="@/static/notData.png" alt="" />
              </view>
            </view>
          </view>
        </view>
        <view class="outSideBox_two" v-if="tag === 1">
          <view class="timePicker">
            <view class="innerInput">
              <view @click="isShowStartTime = true"
              >{{ showTimeStart }}</view>
              <view @click="isShowEndTime = true"
              >{{ showTimeEnd }}</view>
            </view>
            <view>
              <u-button type="primary" text="导出" @click="getDataList"></u-button>
            </view>
          </view>
          <view class="titleView">
            <view class="timeClass">采集时间</view>
            <view class="temperClass">温度(℃)</view>
            <view class="humidnClass">湿度(%RH)</view>
          </view>
          <view class="innerContent">
            <view class="dataContent" v-for="(item,index) in dataListInPage" :key="index">
              <view class="timeClass">{{ item.time | setTime }}</view>
              <view class="temperClass">{{ item.temperature }}</view>
              <view class="humidnClass">{{ item.humidity }}</view>
            </view>
            <!-- <u-loadmore
              :status="status"
              :loadmoreText="loadmoreText" /> -->
          </view>
        </view>
        <view class="outSideBox_thr" v-if="tag === 2">
          <view class="thrBoxFor">
            <view class="titleThr">
              设备信息
              <view class="lineForBottom"></view>
            </view>
            <view class="thrTahDetail">
              <view class="firName">设备名称</view>
              <view class="content">{{ thrDetailsObj.nickName}}</view>
              <view class="lineForBottom"></view>
            </view>
            <view class="thrTahDetail">
              <view class="firName">设备编号</view>
              <view class="content">{{ thrDetailsObj.id}}</view>
              <view class="lineForBottom"></view>
            </view>
            <view class="thrTahDetail">
              <view class="firName">设备是否在线</view>
              <view class="content">{{ thrDetailsObj.online === 0 ? '离线' : '在线'}}</view>
              <view class="lineForBottom"></view>
            </view>
            <view class="thrTahDetail">
              <view class="firName">设备状态</view>
              <view class="content">{{ thrDetailsObj.online === 0 ? '正常' : '异常'}}</view>
              <view class="lineForBottom"></view>
            </view>
            <view class="thrTahDetail">
              <view class="firName">创建时间</view>
              <view class="content">{{ thrDetailsObj.createTime | setTime }}</view>
              <view class="lineForBottom"></view>
            </view>
            <view class="thrTahDetail">
              <view class="firName">修改时间</view>
              <view class="content">{{ thrDetailsObj.updateTime | setTime }}</view>
              <view class="lineForBottom"></view>
            </view>
            <view class="thrTahDetail">
              <view class="firName">上报时间</view>
              <view class="content">{{ thrDetailsObj.time | setTime }}</view>
              <view class="lineForBottom"></view>
            </view>
            <view class="thrTahDetail">
              <view class="firName">温度</view>
              <view class="content">{{ thrDetailsObj.temperature}}</view>
              <view class="lineForBottom"></view>
            </view>
            <view class="thrTahDetail">
              <view class="firName">温度状态</view>
              <view class="content">{{ thrDetailsObj.tStatus === 0 ? '正常' : thrDetailsObj.tStatus === 1 ? '上限' : '下限' }}</view>
              <view class="lineForBottom"></view>
            </view>
            <view class="thrTahDetail">
              <view class="firName">湿度</view>
              <view class="content">{{ thrDetailsObj.humidity }}</view>
              <view class="lineForBottom"></view>
            </view>
            <view class="thrTahDetail">
              <view class="firName">湿度状态</view>
              <view class="content">{{ thrDetailsObj.hStatus === 0 ? '正常' : thrDetailsObj.hStatus === 1 ? '上限' : '下限' }}</view>
              <view class="lineForBottom"></view>
            </view>
            <view class="thrTahDetail">
              <view class="firName">剩余电量</view>
              <view class="content">{{ thrDetailsObj.quantity }}</view>
              <view class="lineForBottom"></view>
            </view>
            <view class="thrTahDetail">
              <view class="firName">电量状态</view>
              <view class="content">{{ thrDetailsObj.qStatus === 0 ? '正常' : thrDetailsObj.qStatus === 1 ? '上限' : '下限'  }}</view>
              <view class="lineForBottom"></view>
            </view>
            <view class="thrTahDetail">
              <view class="firName">信号强度</view>
              <view class="content">{{ thrDetailsObj.dSignal }}</view>
              <view class="lineForBottom"></view>
            </view>
            <view class="thrTahDetail">
              <view class="firName">收集间隔/s</view>
              <view class="content">{{ thrDetailsObj.collectionInterval }}秒</view>
              <view class="lineForBottom"></view>
            </view>
            <view class="thrTahDetail">
              <view class="firName">上传间隔/s</view>
              <view class="content">{{ thrDetailsObj.uploadInterval }}秒</view>
              <view class="lineForBottom"></view>
            </view>
            <view class="thrTahDetail">
              <view class="firName">超温采集间隔/s</view>
              <view class="content">{{ thrDetailsObj.overCollectionInterval }}秒</view>
              <view class="lineForBottom"></view>
            </view>
            <view class="thrTahDetail">
              <view class="firName">超温上报间隔/s</view>
              <view class="content">{{ thrDetailsObj.overUploadInterval }}秒</view>
              <view class="lineForBottom"></view>
            </view>
            <view class="thrTahDetail">
              <view class="firName">温度上限告警</view>
              <view class="content">{{ thrDetailsObj.enableTmpUpperAlarm === 0 ? '否' : '是' }}</view>
              <view class="lineForBottom"></view>
            </view>
            <view class="thrTahDetail">
              <view class="firName">报警上限温度</view>
              <view class="content">{{ thrDetailsObj.tmpUpperLimit }}</view>
              <view class="lineForBottom"></view>
            </view>
            <view class="thrTahDetail">
              <view class="firName">温度下限告警</view>
              <view class="content">{{ thrDetailsObj.enableTmpLowerAlarm === 0 ? '否' : '是' }}</view>
              <view class="lineForBottom"></view>
            </view>
            <view class="thrTahDetail">
              <view class="firName">报警下限温度</view>
              <view class="content">{{ thrDetailsObj.tmpLowerLimit }}</view>
              <view class="lineForBottom"></view>
            </view>
            <view class="thrTahDetail">
              <view class="firName">湿度上限告警</view>
              <view class="content">{{ thrDetailsObj.enableHumUpperAlarm === 0 ? '否' : '是' }}</view>
              <view class="lineForBottom"></view>
            </view>
            <view class="thrTahDetail">
              <view class="firName">报警上限温度</view>
              <view class="content">{{ thrDetailsObj.humUpperLimit }}</view>
              <view class="lineForBottom"></view>
            </view>
            <view class="thrTahDetail">
              <view class="firName">湿度下限告警</view>
              <view class="content">{{ thrDetailsObj.enableHumLowerAlarm === 0 ? '否' : '是' }}</view>
              <view class="lineForBottom"></view>
            </view>
            <view class="thrTahDetail">
              <view class="firName">报警下限温度</view>
              <view class="content">{{ thrDetailsObj.humLowerLimit }}</view>
              <view class="lineForBottom"></view>
            </view>
            <view class="thrTahDetail">
              <view class="firName">电量不足告警 </view>
              <view class="content">{{ thrDetailsObj.enableQuantityAlarm === 0 ? '否' : '是' }}</view>
              <view class="lineForBottom"></view>
            </view>
            <view class="thrTahDetail">
              <view class="firName">电量告警阈值</view>
              <view class="content">{{ thrDetailsObj.quantityLimit }}</view>
              <view class="lineForBottom"></view>
            </view>
            <view class="thrTahDetail">
              <view class="firName">温度校准</view>
              <view class="content">{{ thrDetailsObj.calTmp }}</view>
              <view class="lineForBottom"></view>
            </view>
            <view class="thrTahDetail">
              <view class="firName">湿度校准</view>
              <view class="content">{{ thrDetailsObj.calHum }}</view>
              <view class="lineForBottom"></view>
            </view>
          </view>
        </view>
        
        <u-datetime-picker
          :show="isShowStartTime"
          v-model="valueStart"
          mode="datetime"
          @confirm="confirmStart"
          @cancel="isShowStartTime = false"
        ></u-datetime-picker>
        <u-datetime-picker
          :show="isShowEndTime"
          v-model="valueEnd"
          mode="datetime"
          @confirm="confirmEnd"
          @cancel="isShowEndTime = false"
        ></u-datetime-picker>
      </view>
    </view>
    <view class="showForSwich" v-show="!showForTah">
      <view class="thrBoxFor">
        <view class="titleThr">
          开关信息
          <view class="lineForBottom"></view>
        </view>
        <view class="thrTahDetail">
          <view class="firName">设备编号</view>
          <view class="content">{{ switchObj.ClientID }}</view>
          <view class="lineForBottom"></view>
        </view>
        <view class="thrTahDetail">
          <view class="firName">网关ID</view>
          <view class="content">{{ switchObj.gatewayId }}</view>
          <view class="lineForBottom"></view>
        </view>
        <view class="thrTahDetail">
          <view class="firName">电压</view>
          <view class="content">{{ switchObj.voltage }}</view>
          <view class="lineForBottom"></view>
        </view>
        <view class="thrTahDetail">
          <view class="firName">电流</view>
          <view class="content">{{ switchObj.current }}</view>
          <view class="lineForBottom"></view>
        </view>
        <view class="thrTahDetail">
          <view class="firName">功耗</view>
          <view class="content">{{ switchObj.power }}</view>
          <view class="lineForBottom"></view>
        </view>
        <view class="thrTahDetail">
          <view class="firName">用电量</view>
          <view class="content">{{ switchObj.energy }}</view>
          <view class="lineForBottom"></view>
        </view>
        <view class="thrTahDetail">
          <view class="firName">接触点温度</view>
          <view class="content">{{ switchObj.temperature }}</view>
          <view class="lineForBottom"></view>
        </view>
        <view class="thrTahDetail">
          <view class="firName">工作模式</view>
          <view class="content">{{ switchObj.Mode }}</view>
          <view class="lineForBottom"></view>
        </view>
        <view class="thrTahDetail">
          <view class="firName">开关状态 </view>
          <view class="content">{{ switchObj.SwitchStatus === 0 ? '关' : '开' }}</view>
          <view class="lineForBottom"></view>
        </view>
        <view class="thrTahDetail">
          <view class="firName">更新时间 </view>
          <view class="content">{{ switchObj.updateTime | setTime }}</view>
          <view class="lineForBottom"></view>
        </view>
      </view>
    </view>
	</view>
</template>

<script>
  import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas'
  import * as echarts from '@/components/uni-ec-canvas/echarts.min'
  import request from '@/request/api';
  import { timestampToDatetime } from '@/untils/index';
  import topBar from '@/components/test/topBar';
  let chart = null
	export default {
		data() {
			return {
        timer: new Date().getTime(),
        // status:'loadmore',
        // loadmoreText:'加载更多...',
        showForTah: true,
        isShowCanvas: true,
        switchObj:{},
        thrDetailsObj:{},
        dataListInPage: [],
        showTimeStart: '2024-08-09 10:00:00',
        showTimeEnd:'2024-08-09 10:30:00',
        isShowStartTime: false,
        isShowEndTime: false,
        makeVlueForStart: '',
        makeVlueForEnd: '',
        valueStart: Number(new Date()),
        valueEnd: Number(new Date()),
        detailId:'',
        ec: {
          lazyLoad: true
        },
        optionFroLine:{
          // ...具体的图表配置项
          tooltip: {
            trigger: 'axis',
            axisPointer: { type: 'cross' }
          },
          legend: {
            data: ['湿度', '温度']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '湿度',
              type: 'line',
              stack: 'Total',
              data: []
            },
            {
              name: '温度',
              type: 'line',
              stack: 'Total',
              data: []
            },
          ]
        },
        listDefault: [
          {
            name:'详情',
            isChecked: true
          },
          {
            name:'数据',
            isChecked: false
          },
          {
            name:'参数',
            isChecked: false
          }
        ],
        isScrollable: true,
        tag: 0,
        radiovalue: '最近一天',
        radiolist: [
          {
            name:'最近一天',
            disabled: false
          },
          {
            name:'最近一周',
            disabled: false
          },
          {
            name:'最近一月',
            disabled: false
          }
        ]
			}
		},
    filters: {
      setTime(val){
        return timestampToDatetime(val)
      }
		},
    components: {
      uniEcCanvas,
      topBar
		},
		onLoad(e) {
      this.detailId = e.id
      if (e.tag === '1') {
        this.showForTah = false
        this.getSwitchDetails()
      } else {
        this.canvasFun()
        this.showForTah = true
        this.isScrollable = this.listDefault.length > 4 ? true : false  // tips
      }
		},
		onShow() {
      
      uni.pageScrollTo({
        scrollTop: 0
      })
    },
		methods: {
      getSwitchDetails(){
        let options = {
          url: '/mobile/switch/detail',
          method: 'GET',
          data: {
            deviceId: this.detailId
          }
        }
        request(options).then(res => {
          this.switchObj = res.data
        })
      },
      getDataList(){
        let options = {
          url: '/mobile/tah/data',
          method: 'GET',
          data: {
            deviceId: this.detailId,
            start: this.makeVlueForStart === '' ? new Date(this.showTimeStart).getTime() : this.makeVlueForStart,
            end: this.makeVlueForEnd === '' ? new Date(this.showTimeEnd).getTime() : this.makeVlueForEnd
          }
        }
        request(options).then(res => {
          this.dataListInPage = res.data
        })
      },
      confirmStart(T){
        this.valueStart = timestampToDatetime(T.value)
        this.makeVlueForStart = T.value
        this.showTimeStart = timestampToDatetime(T.value)
        this.isShowStartTime = false
      },
      confirmEnd(T){
        this.valueEnd = timestampToDatetime(T.value)
        this.makeVlueForEnd = T.value
        this.showTimeEnd = timestampToDatetime(T.value)
        this.isShowEndTime = false
      },
      canvasFun (dayNum = 1) {
        // console.log(dayNum);
        
        const options = {
          url: '/mobile/tah/statistics',
          method: 'GET',
          data: {
            day: dayNum,
            deviceId: this.detailId
          }
        }
        request(options).then(res => {
          
          if (res.data.length > 0) {
            this.isShowCanvas = true
          } else {
            this.isShowCanvas = false
          }
          const arrTem = []
          const arrHum = []
          const upTime = []
          for (const item in res.data) {
            arrTem.push(res.data[item].temperature)
            arrHum.push(res.data[item].humidity)
            upTime.push(timestampToDatetime(res.data[item].updateTime))
          }
          this.optionFroLine.series[0].data = arrHum
          this.optionFroLine.series[1].data = arrTem
          this.optionFroLine.xAxis.data = upTime
          this.$nextTick(() => {
            this.$refs.canvas.init(this.initChart)
          })
        })
      },
      checkedEm(item) {
        
        let arr = this.listDefault
        arr.forEach(el => {
          if (el.isChecked === true) {
            el.isChecked = false
          }
        });
        this.listDefault = arr
        this.listDefault[item].isChecked = true
        this.timer = new Date().getTime() + Math.floor(Math.random() * 10) + 1;
        this.tag = item
        if (this.tag === 0) {
          this.canvasFun()
        } else if (this.tag === 1) {
          this.getDataList()
        } else if (this.tag === 2) {
          let options = {
            url: '/mobile/tah/detail',
            method: 'GET',
            data: {
              deviceId: this.detailId
            }
          }
          request(options).then(res => {
            this.thrDetailsObj = res.data
          })
        }
      },
      groupChange(v){
        if (this.radiovalue === '最近一月') {
          this.canvasFun(30)
        } else if (this.radiovalue === '最近一周') {
          this.canvasFun(7)
        } else if (this.radiovalue === '最近一天') {
          this.canvasFun(1)
        }
      },
      radioChange(v){
        // console.log(v);
      },
      initChart(canvas, width, height, canvasDpr) {
        chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: canvasDpr
        })
        canvas.setChart(chart)
        chart.setOption(this.optionFroLine)
        return chart
      }
		}
	}
</script>

<style lang="scss">
.contentTop {
  width: 100%;
  height: auto;
}
.showForTahClass {
  width: 100%;
  height: auto;
}
.showForSwich {
  width: 100%;
  height: auto;
}
.topViewDetail {
  width: 100%;
  height: 100rpx;
}
.uniCanvas {
  width: 100%;
  height: auto;
  position: relative;
}
.notDataCanvas {
  width: 300rpx;
  height: 300rpx;
  position: absolute;
  transform: translate(150rpx);
  image {
    width: 100%;
    height: 100%;
  }
}
.outSideBox_one {
  width: 100%;
  height: auto;
}
.outSideBox_two {
  width: 100%;
  height: auto;
}
.outSideBox_thr {
  width: 100%;
  height: auto;
}
.detail {
  width: 94%;
  margin: 10rpx 3%;
}
.topLine {
  width: 100%;
}
.u-radio-group--row {
  justify-content: center;
}
.uni-ec-canvas {
  width: 100%;
  height: 500rpx;
  display: block;
  margin-top: 30rpx;
}
.timePicker {
  width: 96%;
  margin: 20rpx 2%;
  display: flex;
  justify-content: space-between;
}
.titleView {
  width: 97%;
  margin: 10rpx 1.5%;
  display: flex;
  background-image: linear-gradient(to right, #7979ed 40%, #a4a5ee);
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  font-size: 32rpx;
  .timeClass {
    width: 50%;
  }
  .temperClass {
    width: 20%;
  }
  .humidnClass {
    width: 30%;
  }
}
.innerInput {
  display: flex;
  width: 75%;
  justify-content: space-between;
  view {
    width: 48%;
    font-size: 32rpx;
    border: 1rpx solid #000;
    text-align: center;
  }
}
.innerContent {
  width: 97%;
  margin: 10rpx 1.5%;
  :nth-child(2n) {  
    background-image: linear-gradient(to right, #a4a5ee 40%, #cfcfe8);
  }
}
.dataContent {
  width: 100%;
  display: flex;
  height: 100rpx;
  line-height: 100rpx;
  :nth-child(2n) {
    background-image: unset;
  }
}
.timeClass {
  width: 55%;
}
.temperClass {
  width: 20%;
  text-align: start;
}
.humidnClass {
  width: 20%;
  text-align: center;
}
.thrBoxFor {
  width: 96%;
  margin: 20rpx 2%;
  font-size: 32rpx;
}
.titleThr {
  position: relative;
  color: #979797;
  padding: 15rpx 0;
  margin-bottom: 20rpx;
}
.lineForBottom {
  position: absolute;
  bottom: 0;
  height: 0.5rpx;
  width: 100%;
  background-color: #979797;
  opacity: .5;
}
.thrTahDetail {
  position: relative;
  color: #979797;
  padding: 15rpx 0;
  display: flex;
  justify-content: space-around;
  .firName {
    width: 50%;
    text-align: start;
    color: #000;
  }
  .content {
    text-align: end;
    width: 50%;
  }
}
</style>
